<template>
    <div class="detail">
        <VHeader title="志愿服务团队"/>
        <div class="title" v-text="item.teamName"></div>
        <div class="thumb">
            <img :src="item.thumbImage" width="100%">
        </div>
        <div class="content" v-html="item.description"></div>
        <div class="contact">
            <div class="flex"><div class="muted">所属区域：</div><div>{{item.area}} > {{item.village}}</div></div>
            <div class="flex"><div class="muted">团队成员：</div><div>{{item.userCount}}人</div></div>
            <div class="flex"><div class="muted">开展活动：</div><div>{{item.activityTimes}}次</div></div>
                <div class="flex"><div class="muted">积分：</div><div>{{item.integral}}</div></div>
            <div class="flex"><div class="muted">联系人：</div><div>{{item.contactName}}</div></div>
            <div class="flex"><div class="muted">联系电话：</div><div><a :href="'tel:'+item.contactMobile" class="orange">{{item.contactMobile}}</a></div></div>
            <div class="flex"><div class="muted">注册时间：</div><div>{{item.createDate}}</div></div>
        </div>
        <div class="flex flex-center buttons">
            <button class="apply" @click="apply">申请加入该志愿服务团队</button>
        </div>
    </div>
</template>

<script>
    import {Dialog} from 'vant';
    export default {
        data(){
            return {
                item: {},
            }
        },
        methods: {
            async getItem(id){
                let res = await this.$http({
                    method: 'api.team.getDetail',
                    id,
                });
                this.item = res.data.info;
            },
            apply(){
                Dialog.confirm({
                    title: '确认',
                    message: '您确定加入该志愿服务团队吗？'
                }).then(async () => {
                    await this.$http({
                        method: 'api.team.join',
                        id: this.$route.params.id,
                    });
                    Dialog.alert({
                        title: '成功申请',
                        message: '您已提交申请，将等待管理员审核'
                    }).then(() => {
                        this.$router.push('/myTeam');
                    });
                }).catch(()=>{})
                
            }
        },
        mounted() {
            this.getItem(this.$route.params.id);
        }
    }
</script>

<style lang="scss" scoped>
    .detail {
        font-size:14px;
        padding: 15px 15px 2rem;
        .title {
            font-size: 150%;
            padding: 0.2rem 0;
            border-bottom: 1px solid #378EEF;
            text-align: center;
        }
        .thumb {
            margin: 0.5rem 0;
        }
        .contact {
            margin: 0.3rem 0;
            padding: 0.2rem 0;
            border-top: 1px solid #AAAAAA;
            > div {
                padding: 0.2rem 0;
                border-bottom: 1px dashed #dbdbdb;
            }
            .muted {
                color:#999999;
            }
            .orange {
                color: #EE6F2D
            }
        }
        .buttons {
            margin-top: 0.5rem;
            .apply {
                border:0;
                border-radius: 5px;
                color: white;
                font-size: 130%;
                padding: 0.2rem 0.5rem;
                width: 80%;
                background-color: #F65D5D;
            }
        }
    }
</style>